@import '../pages/global.less';



.fls_cols {
    @mp: 5px;

    height: 110px;
    padding: @mp;
    margin: @mp;
    border: 1px dashed #ccc;
    overflow-y: auto;
    position: relative;
    padding-right: 100px;



    .fls_col {
        @mp: 2px;
        @plr: 6px;

        background: rgb(253, 236, 159);
        border: 1px solid rgb(214, 200, 75);
        border-radius: @mp+3px;
        padding: @mp;
        padding-left: @plr;
        padding-right: @plr;
        margin: @mp;
        display: inline-block;
    }

    .fls_col_drag {
        .fls_col;
        background: #fff;
        border: 1px dashed #ccc;
        color: #ccc;
    }

    .button {
        @mp:5px;
        position: absolute;
        right: @mp;
        top: @mp;
        width: 95px;
        text-align: right;

        button{
            margin-bottom: @mp;
            width: 100%;
        }
    }
}

.sys_cols {
    @mp: 5px;

    padding: @mp;
    margin: @mp;
    margin-top: 10px;
    border: 1px solid #ccc;

    span {
        position: absolute;
        right: 8px;
        top: 0px;
        color: rgb(187, 187, 187);
        background: #fff;
        padding-left: 3px;
    }

    .sys_col {
        @mp: 2px;
        @plr: 10px;

        display: inline-block;
        background: rgb(241, 241, 241);
        height: 36px;
        width: 100%;
        padding: @mp;
        overflow: auto;

        .fls_col,
        .sys_col {
            .fls_cols .fls_col;
        }

        .fls_col_drag {
            .fls_cols .fls_col_drag;
        }

    }

    .sys_col_drop {
        .sys_col;
        background: rgb(255, 179, 179);
        border: 2px solid red;
    }

    p:first-child {
        padding: 0px;
        margin: 0px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}